import React from "react";
import Square from "./Square";
import { StringOrNull } from "./Types";

interface IProps {
  squares: Array<StringOrNull>;
  onClick: Function;
}

export class Board extends React.Component<IProps> {
  renderSquare(i: number) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  renderCol(row: number) {
    var Cols: JSX.Element[] = [];
    for (var i = 0; i < 3; i++) {
      Cols.push(this.renderSquare(row * 3 + i));
    }
    return Cols;
  }

  renderRow() {
    var Rows: JSX.Element[] = [];
    for (var i = 0; i < 3; i++) {
      Rows.push(<div className="board-row">{this.renderCol(i)}</div>);
    }
    return Rows;
  }

  render() {
    return <div>{this.renderRow()}</div>;
  }
}
